<template>
    <div>
        <el-row>
            <el-col :span="24">
                <nav-menu-bar class="grid-content bg-purple-dark" @toIcon="changeToIcon"></nav-menu-bar>
            </el-col>
        </el-row>
        <transition enter-active-class="fadeIn" leave-active-class="fadeOut"
                    :duration="{enter:500,leave:1000}">
            <login-info-card class="animated" v-show="showLoginInfoCard" @toCard="changeToCard"></login-info-card>
        </transition>
        <router-view></router-view>
    </div>
</template>

<script>
    import NavMenuBar from './navMenuBar'
    import LoginInfoCard from './loginInfoCard'

    export default {
        name: 'index',
        data () {
            return {
                registerInfo: false,
                showLoginInfoCard: false,
                enterIcon: false,
                enterCard: false,
                loading: false
            }
        },
        components: {
            NavMenuBar,
            LoginInfoCard
        },
        methods: {
            changeLoginInfoCard () {
                setTimeout(() => {
                    if (this.enterIcon || this.enterCard) {
                        this.showLoginInfoCard = true
                    } else if ((!this.enterIcon) && (!this.enterCard)) {
                        this.showLoginInfoCard = false
                    }
                }, 300)
            },
            changeToIcon (flag) {
                this.enterIcon = flag
                this.changeLoginInfoCard()
            },
            changeToCard (flag) {
                this.enterCard = flag
                this.changeLoginInfoCard()
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
